<template>
  <el-tabs type="border-card">
		<el-tab-pane label="门诊退药">
      <el-form :inline="true" :model="sickref" class="demo-form-inline f1">
    <el-form-item label="申请表编号：" >
      <el-input v-model="sickref.id" placeholder="请输入编号" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="select()">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="sicklist.slice((currentpage - 1) * pagesize, currentpage * pagesize)" :border="false" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">药品总价: {{comp(props.row)}}</p>
          <h3>退还药品列表</h3>
          <el-table :data="props.row.reDrugs" :border="true">
            <el-table-column label="药品编号" prop="drug.number" />
            <el-table-column label="药品名" prop="drug.name" />
            <el-table-column label="药品价格" prop="drug.price" />
            <el-table-column label="退药数量" prop="count" />
            <el-table-column label="药品状态">
              <template v-slot="scope">
                    <el-tag v-show="show(scope.row.state)" class="ml-2" type="success">已退药</el-tag>
                    <el-tag v-show="!show(scope.row.state)" class="ml-2" type="info">未退药</el-tag>
                  </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="申请表编号" prop="id" />
    <el-table-column label="患者病历号" prop="pid" />
    <el-table-column label="患者名" prop="name" />
    <el-table-column label="申请者（医生）" prop="doctor" />
    <el-table-column label="操作" width="120">
      <template v-slot="scope">
      <el-button  size="small" type="warning"  :disabled="!show3(scope.row)" @click="ret(scope.row.id)">退药</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination class="fy" layout="prev, pager, next" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :page-size="pagesize" :total="sicklist.length">
      </el-pagination>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { computed, ref } from 'vue';
import { Drug } from './Yaopin.vue';
interface Sick{
  id?:number
  pid?:string
  name?:string
  doctor?:string
  reDrugs?:[{
    id?:number
    aid?:number
    dnum?: string
    state?: string
    count?: number
    drug?: Drug
  }]
}
const pagesize = ref(5)
const currentpage = ref(1)
const handleSizeChange = (size) => {

  //一页显示多少条

  pagesize.value = size;

}
const handleCurrentChange = (page) => {

  //页码更改方法

  currentpage.value = page;

}
const sum=ref<number>();
const sickref=ref<Sick>({})
const sicklist=ref<Sick[]>([])
const comp=computed(()=>(yp:Sick)=>{
  sum.value=0
  for( let i of yp.reDrugs!){
        sum.value+=i.count!*i.drug!.price!
      }
  return sum.value.toFixed(2)
})
const show = (state) => {
  if (state == '2')
    return true
  return false
}
const show3 = (row) => {
    for( var i of row.reDrugs){
        if(i.state=='1')
          return true
      }
    return false
}
const select = async () => {
  await axios.post("/api/reapp/select", sickref.value, {
    headers: {
      'Authorization': sessionStorage.getItem('authtoken')!
    }
  }).then(res => {
    sicklist.value = res.data.result
  })
}
const ret = async (aid) => {
  await axios.post("/api/redrug/ret", {
    id: aid
  }, {
    headers: {
      'Authorization': sessionStorage.getItem('authtoken')!
    }
  }).then(res => {
    if (res.data.msgId === "A006") {
      alert('退药完毕')
      select()
    }
    else {
      alert('退药失败')
    }
  })
}
</script>